<template>
  <div style="width: 100%; height: 100%" class="test">
    <!-- <dv-page target="parent" fit> -->
      <dv-chart-map :data="data" :register="register" map="china" :settings="settings"    debug :extend="extend"></dv-chart-map>
   
    <!-- </dv-page> -->
  </div> 
    
</template>
<script setup lang="ts" >
  import { ref } from 'vue';
  // import 'echarts/lib/chart/bar'; 
  // import {DvPage, DvChartMap, DvBox} from '$comp/index';
  import china from '$comp/assets/geo/china.json';
  // import { ScatterChart, LinesChart } from "echarts/charts"; // , EffectScatterChart
  import { DvPage, DvChartMap } from '../../lib/dv-hub'; 

  
  const area = {
    columns: ['省份', '面积'],
    rows: [
      ['广东', 100],
      ['北京', 60],
      ['广西', 78],
      ['湖南', 90],
      ['湖北', 110],
      ['福建', 87],
      ['新疆', 90],
      ['贵州', 75],
      ['江苏', 63],
      ['山西', 80],
      ['山东', 90],
      ['黑龙江', 105]
    ]
  }
   
  const scatter = {
    columns: ['省份', '人口'],
    rows: [
      ['广东', 210],
      ['湖南', 210],
      ['贵州', 210],
      ['新疆', 210],
      ['西藏', 210]
    ]
  }

  const effectScatter = {
    columns: ['省份', '首都'],
    rows: [
      ['北京', 2]
    ]
  }

  const lines = {
    columns: ['路线', '航线'],
    rows: [
      ['广东->北京', ['广东', '北京']],
      ['湖南->北京', ['湖南', '北京']],
      ['贵州->北京', ['贵州', '北京']],
      ['新疆->北京', ['新疆', '北京']],
      ['西藏->北京', ['西藏', '北京']]
    ]
  }
  
  // const install = ref([ ScatterChart, LinesChart ]) // 
  // 
  const register = ref(china);
  const data = ref([area, scatter, lines]) //, scatter effectScatter, 
  const settings = ref({
    roam: true, 
    type: {
      '面积': 'map', 
      '人口': 'scatter',
      '航线': 'lines',
      // '首都': 'effectScatter'
    }
  })
  const extend = ref({
  
    'series.1.itemStyle': {
      color: 'yellow'
    },
    
    // 'series.2.itemStyle': {
    //   color: 'red'
    // },
    // 'series.2.symbolSize': 20,
     
    'series.2.lineStyle': {
      color: 'red',
      width: 2,
      curveness: 0.4
    },
    'series.2.effect': {
      show: true,
      period: 4, // 箭头指向速度，值越小速度越快
      trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
      symbol: 'arrow', // 箭头图标
      symbolSize: 5 // 图标大小
    }
  })
</script>

<style lang="scss" scoped>
@import '../../lib/style.css';
.test {
  box-sizing: border-box;
  overflow: hidden;
  // border: 5px solid red;
   .dv-box.inner {
  //  background: rgb(68, 107, 226, 0.4);
  //  padding:20px;
   font-size:20px;
   text-align: center;
  }
 }
</style>
